<template>
  <!-- 人才库 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>
        <view class="nav-content__item">人才库</view>
        <!-- <view class="nav-content__item nav-content__item-1">人才榜</view> -->
      </template>
      <template #right>
        <image @click="show = !show" class="more" src="../../../static/image/common/w-more.png" mode="widthFix" />
      </template>
    </cu-custom>

    <view class="content">
      <view class="header">
        <view class="search-wrap">
          <input class="search" type="text" v-model="keyword" placeholder="搜索职务/公司" />
          <view class="search-btn" @click="searchBtn">搜索</view>
        </view>

        <view class="nav-box">
          <view class="nav-wrap">
            <view
              v-for="item in navList"
              :class="['nav-item', { 'nav-activity': navActivity == item.id }]"
              @click="changeNav(item.id)"
            >
              {{ item.industry }}
            </view>
          </view>
          <view class="intention" @click="toIntention">+求职意向</view>
        </view>
      </view>

      <!-- 职位列表 -->
      <view class="list">
        <view class="li" v-for="item in list" :key="item" @click="toDetails(item.id)">
          <view class="li-top">
            <view class="li-top-title">
              {{ item.name }}
            </view>
            <view class="li-top-salary">{{ item.salary_min }} - {{ item.salary_max }}</view>
          </view>

          <view class="li-need">
            <view class="need-item" v-for="it in item.label">
              {{ it }}
            </view>
          </view>

          <view class="li-composer__wrap">
            <view class="li-composer">
              {{ item.company }}
            </view>

            <view class="li-composer_size">
              {{ item.company_size }}
            </view>
          </view>

          <view class="li-info">
            <view class="li-user__info">
              <image class="user-img" :src="item.company_user.avatar" mode="scaleToFill" />

              <view class="">{{ item.job_type }}·{{ item.company_user.realname }}</view>
            </view>

            <view class="li-address">
              <view class="">{{ item.city }}</view>
              <view class="">{{ item.area }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <Popups class="more-wrap" v-model:show="show">
      <view class="more-item" @click="tocurriculum">我的简历</view>
    </Popups>
  </Top-Page>
</template>

<script lang="ts" setup>
import Popups from "@/components/Popups/index";
import recruitApi from "@/api/recruit.js"; //招聘相关API
import { ref, reactive } from "vue";
import { onReachBottom, onShow } from "@dcloudio/uni-app";

const navActivity = ref(0);
const navList: any[] = reactive([]);

const show = ref(false);

//搜索
const keyword = ref("");
const page = ref(0);

//职位列表
const list: any[] = reactive([]);

let type = "init";

onReachBottom(() => {
  IndexList(type);
});

onShow(() => {
  keyword.value = "";
  page.value = 0;
  list.length = 0;
  navList.length = 0;
  IndexList("init");
  mine();
  config();
});

const changeNav = (id: number) => {
  list.length = 0;
  navActivity.value = id;
  keyword.value = "";
  page.value = 0;
  IndexList(type);
};

const toDetails = (id: number) => {
  uni.navigateTo({
    url: `/pages/recruit/recruit-details/recruit-details?id=${id}`
  });
};

//求职意向
const toIntention = () => {
  uni.navigateTo({
    url: `/pages/recruit/intention/intention-list`
  });
};

//个人简历
const tocurriculum = () => {
  uni.navigateTo({
    url: `/pages/recruit/curriculum-vitae/curriculum-vitae`
  });
};

const searchBtn = () => {
  if (!keyword.value) {
    uni.showToast({
      title: "请填写搜索职位",
      icon: "none"
    });
    return;
  }

  page.value = 0;
  type = "search";
  IndexList("search");
};

function IndexList(type: string) {
  recruitApi
    .index({
      keyword: keyword.value,
      intentio_id: navActivity.value,
      page: ++page.value
    })
    .then((res) => {
      (type === "search" || navActivity.value) && (list.length = 0);
      list.push(...res.data);
    });
}

function mine() {
  recruitApi.mine().then((res) => {
    const intention = res.data.intention;
    navList.push(...intention);

    uni.setStorageSync("mine", res.data);
  });
}

function config() {
  recruitApi.config().then((res) => {
    uni.setStorageSync("config", res.data);
  });
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
